<template>
  <v-chart class="chart" :option="option"  autoresize />
</template>

<script setup lang="ts" name="bookdata">
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import {ref, provide, onMounted} from "vue";
import {BookStatic} from "../api";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

provide(THEME_KEY, "default");
// provide(THEME_KEY, "dark");

const option = ref({
  title: {
    text: "图书种类数据",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    // data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
    data: []
  },
  series: [
    {
      name: "图书->种类",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [
        // { value: 1548, name: "Search Engines" }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});
onMounted(() =>{
  BookStatic().then(res=>{
    for (let dataKey in res.data.data) {
      option.value.legend.data.push(res.data.data[dataKey].Name)
      option.value.series[0].data.push({value:res.data.data[dataKey].Cnt,name:res.data.data[dataKey].Name})

      // console.log(res.data.data[dataKey].Name)
      // curData.push(,)
    }
    console.log(option.value.legend.data)
    //  = curData
  })
})


</script>

<style scoped>
.chart {
  /*height: 400px;*/
}
</style>